<template>
	<div class="login">
		<div class="middle-wrapper">
			<div class="login-form">
				<div class="login-title">智慧医院后台管理系统</div>
				<el-form
						ref="form"
						:model="loginForm"
						:rules="rules">
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" placeholder="请输入账号" autocomplete="on">
							<i slot="prefix" class="el-input__icon el-icon-lx-people" style="font-size: 18px;"></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input :type="passwordType" v-model="loginForm.password" placeholder="请输入密码" autocomplete="on">
							<i slot="prefix" class="el-input__icon el-icon-lx-lock" style="font-size: 18px;"></i>
							<i slot="suffix" :class="passwordType === 'password' ? 'el-icon-lx-attentionforbidfill' : 'el-icon-lx-attention'" class="el-input__icon" style="cursor: pointer;"
							   @click="_togglePasswordType"></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="checkCode">
						<div class="check-code-wrapper">
							<div class="checkCode-wrapper">
								<el-input v-model="loginForm.checkCode" @keyup.enter.native="login('form')"
										  placeholder="请输入验证码">
									<i slot="prefix" class="el-input__icon el-icon-lx-pic"
									   style="font-size: 18px;"></i>
								</el-input>
							</div>
							<div class="validate-code-wrapper">
								<validate-code ref="validate-code" @change="_setCheckCode"></validate-code>
							</div>
						</div>
					</el-form-item>
					<el-form-item style="margin-bottom: 0;">
						<el-col :span="10" :offset="14">
							<el-form-item>
								<el-button
										type="primary"
										class="login-btn"
										style="width: 100%;"
										@click="loginHandle('form')">
									登陆系统
								</el-button>
							</el-form-item>
						</el-col>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
    import validateCode from '../../components/ValidateCode/index';

    export default {
        created () {
        },
        components: {
            validateCode
        },
        data () {
            var identifyingCode = (rule, value, callback) => {
                value = value.toUpperCase();
                if (value === '') {
                    callback(new Error('请输入验证码'));
                } else if (value !== this.checkCode) {
                    callback(new Error('验证码错误'));
                    this.$refs['validate-code'].draw();
                } else {
                    callback();
                }
            };
            return {
                passwordType: 'password',
                checkCode: '',
                loginForm: {
                    username: '',
                    password: '',
                    checkCode: ''
                },
                rules: {
                    username: [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                    checkCode: [
                        {validator: identifyingCode, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            _setCheckCode (value) {
                this.checkCode = value;
            },
            _togglePasswordType () {
                if (this.passwordType === 'password') {
                    this.passwordType = 'text';
                } else {
                    this.passwordType = 'password';
                }
                /*this.$nextTick(() => {
                    this.$refs.password.focus()
                })*/
            },
            loginHandle (formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.login();
                    }
                });
            },
            login () {
                /*
				 *  在这边可以进行登陆请求
				 *  将请求返回的Token对象存到store中
				 *  @Token  token对象
				*/
                let token = 'a94756da-2962-40ae-bdea-787fd02c9d92';
                this.$store.commit('SET_TOKEN', token);
                let _this = this
                console.log(this.$store.state)
                this.$http
                    .post('/login', {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    })
                    .then(successResponse => {
                        if (successResponse.data.code === 200) {
                            // var data = this.loginForm
                            this.$message({
                                showClose: true,
                                message: '登录成功！欢迎ε=ε=(ノ≧∇≦)ノ',
                                type: 'success'
                            });
                            _this.$store.commit('login', _this.loginForm)
                            var path = this.$route.query.redirect
                            this.$router.replace({path: path === '/' || path === undefined ? '/dashboard' : path})
                        } else {
                          //  错误提示
                          this.$alert(successResponse.data.message,'提示', {
                              message: '密码错误！请重新输入_(:3」∠)_',
                              confirmButtonText: '确定'
						  })
						}
                    })
                    .catch(failResponse => {
                        console.log(failResponse)
                    })
            }
        }
    };
</script>
<style lang="scss" scoped>
.login {
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/login-bg.jpg);
		background-size: 100%;
		.middle-wrapper {
			position: fixed;
			width: 100%;
			margin: 0 auto;
			top: 50%;
			transform: translateY(-60%);
			.title-wrapper {
				margin-top: 50px;
				margin-bottom: 30px;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
				color: #fff;
			}
			
			.login-form {
				position: relative;
				margin: 0 auto;
				width: 450px;
				padding: 30px 50px;
				box-sizing: border-box;
				border-radius: 5px;
				background-color: #ffffff;
				.login-title {
					color: #333;
					font-weight: bold;
					text-align: center;
					margin: 0 auto 30px;
				}
				
				.el-row {
					margin-bottom: 20px;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.login-btn {
						width: 100%;
					}
				}
				
				.check-code-wrapper {
					display: flex;
					justify-content: space-between;
					height: 40px;
					
					.checkCode-wrapper {
						width: 160px;
						flex: 0 1 auto;
					}
					
					.validate-code-wrapper {
						flex: 0 0 160px;
					}
				}
			}
		}
	}
</style>
